<template>
  <div style="padding: 20px">
    <!-- 用户查询数据 -->
    <el-row align="middle">
      <el-form ref="form" :model="searchInfo" label-width="120px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="设备编号">
              <el-input
                v-model="searchInfo.Code"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备名称">
              <el-input
                v-model="searchInfo.Name"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备分类">
              <el-select
                v-model="searchInfo.Classification"
                placeholder="请选择"
                @change="selechange"
                clearable
              >
                <el-option
                  v-for="item in dictionaryList"
                  :key="item.Value"
                  :label="item.Text"
                  :value="item.Value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item label="IP地址">
              <el-input v-model="searchInfo.IP" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="端口号">
              <el-input v-model="searchInfo.Port" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备分类">
              <el-input v-model="searchInfo.Classification" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="稼动率基准时间">
              <el-input-number
                v-model="searchInfo.MonetaryLength"
                controls-position="right"
                :min="0"
              ></el-input-number>
            </el-form-item>
          </el-col> -->
          <el-col :span="2" :offset="1">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="middle"
              @click="getList()"
              @keyup.enter="getList()"
              >搜索</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </el-row>
    <!-- 查询 -->
    <el-row style="margin-bottom: 10px">
      <el-button
        type="primary"
        icon="el-icon-circle-plus-outline"
        plain
        size="middle"
        @click="addFun()"
        >新增</el-button
      ></el-row
    >
    <el-table
      :data="tableData"
      header-row-class-name="tableHead"
      stripe
      :popper-append-to-body="false"
      :border="true"
      v-loading="loading"
    >
      <el-table-column type="index" label="序号" align="center" width="50">
      </el-table-column>
      <el-table-column prop="Code" label="设备编号" align="center">
        <template v-slot="{ row }">
          <div class="deviceTitle" @click="handelCheck(row)">
            {{ row.Code }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="Name" label="设备名称" align="center">
      </el-table-column>
      <el-table-column prop="Model" label="设备型号" align="center">
      </el-table-column>
      <el-table-column prop="ID" label="IP地址" align="center">
      </el-table-column>
      <el-table-column prop="Port" label="端口号" align="center">
      </el-table-column>
      <el-table-column prop="Classification2" label="设备分类" align="center">
      </el-table-column>
      <el-table-column
        prop="MonetaryLength"
        label="稼动率基准时间（分）"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="Mark" label="备注" align="center">
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="180">
        <template slot-scope="scope">
          <div
            style="display: flex; flex-warp: nowarp; justify-content: center"
          >
            <el-button
              type="primary"
              size="middle"
              @click="handelEdit(scope.row)"
              >编辑</el-button
            >
            <el-popconfirm
              :title="`确定删除${scope.row.Name}吗`"
              @confirm="handleDel(scope.row)"
            >
              <el-button
                style="margin-left: 10px"
                slot="reference"
                type="danger"
                size="middle"
                >删除</el-button
              >
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-row type="flex" justify="end">
      <el-pagination
        v-show="total > 0"
        style="margin-top: 20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageParams.PageIndex"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageParams.PageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-row>
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisibleCheck"
      width="900px"
    >
      <el-descriptions :column="3" border :contentStyle="CS" :label-style="LS">
        <el-descriptions-item label="设备编号"
          >{{ form.Code }}1</el-descriptions-item
        >
        <el-descriptions-item label="设备型号"
          >{{ form.Model }}1</el-descriptions-item
        >
        <el-descriptions-item label="IP地址">{{
          form.IP
        }}</el-descriptions-item>
        <el-descriptions-item label="端口号">{{
          form.Port
        }}</el-descriptions-item>
        <el-descriptions-item label="设备分类">{{
          form.Classification
        }}</el-descriptions-item>
        <el-descriptions-item label="稼动率基准时间（分）">{{
          form.MonetaryLength
        }}</el-descriptions-item>
        <el-descriptions-item label="绑定程序">{{
          form.programName
        }}</el-descriptions-item>
        <el-descriptions-item label="备注">
          {{ form.Mark }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="160px" :rules="rules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备编号" prop="Code">
              <el-input
                placeholder="请输入内容"
                v-model.trim="form.Code"
                :disabled="isLook"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备名称" prop="Name">
              <el-input
                clearable
                v-model.trim="form.Name"
                :disabled="isLook"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备型号">
              <el-input
                clearable
                v-model.trim="form.Model"
                :disabled="isLook"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="IP地址">
              <el-input
                clearable
                v-model.trim="form.IP"
                :disabled="isLook"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="端口号">
              <el-input
                clearable
                v-model.trim="form.Port"
                :disabled="isLook"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备分类">
              <el-select
                v-model="form.Classification"
                placeholder="请选择"
                @change="selechange"
              >
                <el-option
                  v-for="item in dictionaryList"
                  :key="item.Value"
                  :label="item.Text"
                  :value="item.Value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="稼动率基准时间（分）">
              <el-input-number
                v-model.trim="form.MonetaryLength"
                :disabled="isLook"
                controls-position="right"
                :min="0"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="绑定程序">
              <el-select
                v-model="form.ID_Program"
                placeholder="请选择"
                @change="selechange"
                v-loadmore="getProgramListMore()"
              >
                <el-option
                  v-for="item in programList"
                  :key="item.ID"
                  :label="item.Name"
                  :value="item.ID"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input
                clearable
                :disabled="isLook"
                v-model.trim="form.Mark"
                type="textarea"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" v-show="!isLook">
        <el-button @click="dialogFormVisible = false" plain type="primary"
          >取 消</el-button
        >
        <el-button type="primary" @click="saveInfo()">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped></style>
<script>
import {
  GetDeviceList,
  AddOrUpdateDevice,
  DelDevice,
  GetDictionary,
  GetProgramList,
} from "@/api/index";
export default {
  data() {
    return {
      CS: {
        "text-align": "center", //文本居中
        "min-width": "150px", //最小宽度
        "word-break": "break-all", //过长时自动换行
      },
      LS: {
        color: "#fff",
        "text-align": "center",
        "font-weight": "600",
        height: "40px",
        "background-color": "#377dc4",
        "min-width": "110px",
        "word-break": "keep-all",
      },
      dialogFormVisibleCheck: false,
      programList: [],
      dictionaryList: [],
      title: "",
      loading: false,
      form: {
        ID: 0,
        Code: undefined,
        Name: undefined,
        Model: undefined,
        IP: undefined,
        Port: undefined,
        Classification: undefined,
        MonetaryLength: undefined,
        CreateTime: undefined,
        ID_Program: undefined,
        Mark: undefined,
      },
      searchInfo: {
        Code: undefined,
        Name: undefined,
        Model: undefined,
        IP: undefined,
        Port: undefined,
        Classification: "",
        MonetaryLength: undefined,
        CreateTime: undefined,
        ID_Program: undefined,
        Mark: undefined,
      },
      editInfo: {},
      dialogFormVisible: false,
      total: 1,
      pageParams: {
        PageIndex: 1,
        PageSize: 10,
      },
      isLook: false,
      tableData: [],
      rules: {
        Code: [{ required: true, message: "请输入设备编号", trigger: "blur" }],
        Name: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
      },
      programPage: {
        PageIndex: 1,
        PageSize: 10,
      },
      programsTotal: 0,
    };
  },
  mounted() {
    this.getDictionaryFun();
    this.getProgramList();
    this.getList();
  },
  methods: {
    reset() {
      this.form = {
        ID: 0,
        Code: undefined,
        Name: undefined,
        Model: undefined,
        IP: undefined,
        Port: undefined,
        Classification: undefined,
        MonetaryLength: undefined,
        CreateTime: undefined,
        ID_Program: undefined,
        Mark: undefined,
      };
      this.$refs.form.resetFields();
    },
    handelCheck(row) {
      this.form = row;
      this.title = "查看设备";
      this.programList.map((item) => {
        if (item.ID == this.form.ID_Program) {
          this.form.programName = item.Name;
        }
      });
      this.dialogFormVisibleCheck = true;
    },
    async getProgramListMore() {
      if (this.programPage.PageIndex < this.programsTotal) {
        this.programPage.PageIndex++;
        let query = {
          ...this.programPage,
        };
        let res = await GetProgramList(query);
        this.programList.push(...res.Data.List);
      }
    },
    async getProgramList() {
      let query = {
        ...this.programPage,
      };
      let res = await GetProgramList(query);
      this.programList = res.Data.List;
    },
    selechange(val) {
      console.log(val);
    },
    async getDictionaryFun() {
      try {
        let query = {
          Key: "Device",
        };
        let res = await GetDictionary(query);
        if (res.Result) {
          this.dictionaryList = res.Data;
        }
      } catch (error) {
        console.log(error);
      }
    },
    handleSizeChange(val) {
      console.log(val);
      this.pageParams.PageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(val);
      this.pageParams.PageIndex = val;
      this.getList();
    },
    async getList() {
      let query = {
        ...this.pageParams,
        ...this.searchInfo,
      };
      this.loading = true;
      try {
        let res = await GetDeviceList(query);
        this.tableData = res.Data.List;
        this.tableData.forEach((item) => {
          let obj = this.dictionaryList.find(
            (sel) => sel.Value == item.Classification
          );
          item.Classification2 = obj.Text;
        });
        this.total = res.Data.Total;
        this.loading = false;
      } catch (error) {
        console.log(error);
        this.loading = false;
      }
    },
    addFun() {
      this.reset();
      this.title = "新增设备";
      this.isLook = false;
      this.programList.map((item) => {
        if (item.ID == this.form.ID_Program) {
          console.log(item);
          // this.form.programName =
        }
      });
      this.dialogFormVisible = true;
    },
    async handleDel(row) {
      try {
        await DelDevice({ ID: row.ID });
        this.$message.success("删除成功");
        this.getList();
      } catch (error) {}
    },
    handelEdit(row, look) {
      this.reset();
      this.form = JSON.parse(JSON.stringify(row)) 
      console.log(this.form);
      this.form.Classification = this.form.Classification?.toString();
      if (look) {
        this.isLook = true;
        this.title = "查看设备";
      } else {
        this.title = "编辑设备";
        this.isLook = false;
      }
      this.dialogFormVisible = true;
    },
    async saveInfo() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            let res = await AddOrUpdateDevice({
              Form: JSON.stringify(this.form),
            });
            console.log(res);

            if (res.Result) {
              if (this.form.ID) {
                this.$message.success("修改成功");
              } else {
                this.$message.success("新增成功");
              }
            } else {
              this.$message.error(res.Message);
            }
            this.dialogFormVisible = false;
            this.getList();
          } catch (error) {
            console.log(error);
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
:deep(.el-select) {
  width: 100% !important;
}
:deep(.el-input-number) {
  width: 100% !important;
  .el-input {
    width: 100% !important;
    .el-input__inner {
      width: 100% !important;
    }
  }
}
.deviceTitle {
  color: rgb(41, 102, 233);
  text-decoration: underline;
  cursor: pointer;
}
:deep(.el-input.is-disabled .el-input__inner) {
  color: black;
}
:deep(.el-textarea.is-disabled .el-textarea__inner) {
  color: black;
  color: #377dc4;
}
</style>
